// 第一步导入three.js
import * as THREE from 'three'; // 导入three.js

import '../../../css/base.css'

(function main() {
    // 第三步创建一个加载器
    let canvas = document.getElementById('canvas');
    // let renderer = new THREE.WebGLRenderer({canvas}); // 原来的代码以下是修改后的代码
    let renderer = new THREE.WebGLRenderer({antialias: true, canvas}); // 模型放大后可以看到有锯齿添加这个属性antialias: true,可以抗锯齿

    // 第四步创建一个相机
    let fov = 75, aspect = 2, near = 0.1, far = 5;
    let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 2
    // 第五步创建一个场景
    let scene = new THREE.Scene();

    // 添加一个光源
    let light = new THREE.DirectionalLight(0xFFFFFF, 1);
    light.position.set(-1, 2, 4);
    scene.add(light);

    // 创建一个模型
    let width = 1, height = 1, depth = 1;
    let geometry = new THREE.BoxGeometry(width, height, depth);

    // let material = new THREE.MeshBasicMaterial({color: 0xFF0000}); // 不受光照影响的材质
    // let material = new THREE.MeshLambertMaterial({color: 0xFF0000}); // 受光照影响的材质---不加光看不见
    let material = new THREE.MeshPhongMaterial({color: 0xFF0000}); // 受光照影响的材质---不加光看不见

    let mesh = new THREE.Mesh(geometry, material);
    mesh.position.setX(0)
    let mesh2 = new THREE.Mesh(geometry, material);
    mesh2.position.setX(-2)
    let mesh3 = new THREE.Mesh(geometry, material);
    mesh3.position.setX(2)

    // 将模型添加到场景中
    scene.add(mesh)
    scene.add(mesh2)
    scene.add(mesh3)

    // 最后一步渲染
    function render() {
        // 让场景动起来
        mesh.rotateY(0.01)
        mesh.rotateZ(0.01)
        mesh2.rotateY(0.02)
        mesh2.rotateZ(0.02)
        mesh3.rotateY(0.03)
        mesh3.rotateZ(0.03)
        requestAnimationFrame(render)

        // renderer.render(scene, camera) // 原来的代码以下是修改后的代码

        // // 响应式three.js 防止three.js窗口大小改变导致模型变形
        // camera.aspect = canvas.clientWidth / canvas.clientHeight;
        // camera.updateProjectionMatrix();

        // 优化
        if (resizeRendererToDisplaySize()) {
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
        }
        renderer.render(scene, camera)
    }

    render()

    // 以下是优化后的代码
    function resizeRendererToDisplaySize() {
        let pixelRatio = window.devicePixelRatio;
        // let width = canvas.clientWidth;
        // let height = canvas.clientHeight;
        let width = canvas.clientWidth * pixelRatio | 0;
        let height = canvas.clientHeight * pixelRatio | 0;
        let needResize = canvas.width !== width || canvas.height !== height;
        if (needResize) {
            renderer.setSize(width, height, false);
        }
        return needResize;
    }

    // // 优化方案2 扩展
    // window.addEventListener('resize', reSize, false)
    // function reSize(){
    //     let width = canvas.clientWidth;
    //     let height = canvas.clientHeight;
    //     camera.aspect = canvas.clientWidth / canvas.clientHeight;
    //     camera.updateProjectionMatrix();
    //     renderer.setPixelRatio(window.devicePixelRatio);
    //     renderer.setSize(width, height, false);
    // }


})()
